import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  Text,
  StatusBar,
  Linking,
  Animated,
  Dimensions,
  Easing
} from 'react-native';

const deviceWith = Dimensions.get('window');

const px = width => {
  if(width === 1) {
    return StyleSheet.hairlineWidth;
  }

  return Math.floor( deviceWith/ 750 * width)
};
/**
 * 纵向滚动条
 */

export default class HomeHeadline extends Component {

	static defaultProps={
    headlineList:[{content:'第aaaaaaaaaaaaaaa'},{content:'第23个'},{content:'第34个'},{content:'第99个'}],
	}

	state = {
		topValue: new Animated.Value(0),
		showIndex: 0,
	}

	componentDidMount() {
		this.animateStart();
	}

	animateStart = () => {

		Animated.timing(this.state.topValue, {
			delay: 3000,
			toValue: -16,
			duration: 600,
      easing: Easing.linear
		}).start(() => {
			this.updateShowHeadLine();
			this.state.topValue.setValue(16);
			Animated.timing(this.state.topValue, {
				toValue: 0,
				duration: 600,
        easing: Easing.linear
			}).start(this.animateStart);
		});
	}

	updateShowHeadLine = () => {
		const { headlineList } = this.props;
		const { showIndex } = this.state;

		if(showIndex >= headlineList.length - 1) {
			this.setState({
				showIndex: 0,
			});
		} else {
			this.setState({
				showIndex: showIndex + 1,
			});
		}
	}



	render() {
		const { topValue, showIndex } = this.state;
		const { headlineList } = this.props;

		return (
			<View style={styles.headlineBox}>
				<Text style={styles.headlineLabel}>头条</Text>
				<Image
					style={styles.headlineIcon}
					source={require('./assets/money-front.png')}
				/>
				<TouchableOpacity
					onPress={() => {
						console.log('点击了')
					}}
					style={[styles.itemButton]}
				>
					<Animated.View style={[
						styles.headlineAnimated,
						{transform: [
                {translateY: topValue},
					]}]}>
						{
							headlineList.length ?
							<Text numberOfLines={1} style={styles.headlineText}>
								{headlineList[showIndex].content}
							</Text> : null
						}
					</Animated.View>
				</TouchableOpacity>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	headlineBox: {
		flexDirection: 'row',
		backgroundColor: '#fff',
		height: px(94),
		alignItems: 'center',
		paddingLeft: px(30),
		paddingRight: px(30),
		marginBottom: px(12),
		borderColor: '#ECECEB',
		borderTopWidth: 1,
		borderBottomWidth: 1,
	},
	headlineIcon: {
		margin: 0,
		padding: 0,
		marginLeft: px(10),
		marginRight: px(16),
		width: px(24),
		height: px(24),
	},
	itemButton: {
		flex: 1,
		height: px(94),
		overflow: 'hidden',
	},
	headlineAnimated: {
		height: px(94),
		justifyContent: 'center',
	},
	headlineLabel: {
		fontSize: px(26),
		lineHeight: px(26),
		fontWeight: 'bold',
		color: '#4489f8',
	},
	headlineText: {
		color: '#666',
		fontSize: px(26),
		lineHeight: px(26),
	}
})